<template>
  <!--答题详情信息页面-->
  <view class="practiceView flex flex-column " v-if="detail">
    <view class="head">
      <image :src="detail.coverUrl" />
      <view class="flex flex-row info item-center">
        <view class="f_1 line-1 name">{{ detail.practiceName }}</view>
        <view class="fs_0 flex flex-row item-center">
          <image src="https://qiniu-bjjrzy.bjjrzy.com/bjupi/practice/cognPractice/improve/answer/answer-icon.svg"
            class="fs_0" />
          <text>共{{ sumData.sumNum }}道</text>
        </view>
        <view class="fs_0 flex flex-row item-center" style="margin-left: 14px">
          <image src="https://qiniu-bjjrzy.bjjrzy.com/bjupi/practice/cognPractice/improve/answer/people-icon.svg"
            class="fs_0" />
          <text>共{{ headerInfo.studentNum }}人参与</text>
        </view>
      </view>
    </view>

    <view class="content" :class="{ 'no-btn': type === 'history' && detail.practiceType === 1 }">
      <view class="user-info flex flex-row">
        <image :src="loginData.avatar ? loginData.avatar : '../../static/images/headPortrait.png'" class="img_bg" />
        <view class="user-account flex flex-column around f_1">
          <view class="nickname flex flex-row item-center">
            <text class="line-1">{{ loginData.nickName || "--" }}</text>
            <label class="fs_0" v-if="loginData.isVip">VIP</label>
          </view>
          <view>{{ loginData.phone }}</view>
        </view>
      </view>
      <view class="line" style="height: 3px"></view>
      <view class="practice-info">
        <view class="item flex flex-row item-center">
          <label class="fs_0">练习时长</label>
          <text class="f_1">{{ detail.time }}分钟</text>
        </view>
        <view class="item flex flex-row item-center">
          <label class="fs_0">试题数量</label>
          <text class="f_1">{{ sumData.sumNum }}</text>
        </view>
        <view class="item flex flex-row item-center">
          <label class="fs_0">试卷满分</label>
          <text class="f_1">{{ sumData.sumScore }}</text>
        </view>
        <view class="item flex flex-row item-center">
          <label class="fs_0">及格分数</label>
          <text class="f_1">{{ detail.passScore }}</text>
        </view>
        <view class="item flex flex-row item-center">
          <label class="fs_0">开始时间</label>
          <text class="f_1">{{ detail.startTime }}</text>
        </view>
        <view class="item flex flex-row item-center">
          <label class="fs_0">结束时间</label>
          <text class="f_1">{{ detail.endTime }}</text>
        </view>
        <view v-if="type === 'history' && detail.practiceType == 1 && detail.allowQueryScore">
          <view class="item flex flex-row item-center between" v-for="(item, index) in list" :key="index"
            @click="selectScore(item.upgPracticeJoinUuid)">
            <label class="fs_0">{{ item.date }}</label>
            <view class="flex flex-row item-center">
              <text style="color: #37B874;">查询成绩</text>
              <u-icon name="arrow-right" color="#37B874" size="12"></u-icon>
            </view>
          </view>
        </view>
      </view>
    </view>

    <view class="btn-item" v-if="type !== 'history'">
      <view class="btn" @click="startClick">{{ detail.practiceType == '4' ? '开始答题' : '进入练习' }}</view>
    </view>

    <view v-else>
      <view class="btn-item" v-if="(detail.practiceType == 2 || detail.practiceType == 3) && detail.allowQueryScore">
        <view class="btn" @click="selectScore(null)">成绩查询</view>
      </view>
      <view class="btn-item" v-if="detail.practiceType == 4 && (detail.allowQueryScore || awardInfo.awardStudentUuid)">
        <view v-if="detail.allowQueryScore && awardInfo.awardStudentUuid" class="flex around">
          <view class="btn btn1" @click="selectScore(null)">成绩查询</view>
          <view class="btn btn1 btn2" @click="cashPrizeOpen">奖品兑换</view>
        </view>
        <view v-if="!detail.allowQueryScore && awardInfo.awardStudentUuid" class="btn" @click="cashPrizeOpen">奖品兑换
        </view>
        <view v-if="detail.allowQueryScore && !awardInfo.awardStudentUuid" class="btn" @click="selectScore(null)">成绩查询
        </view>
      </view>
      <view class="award" v-if="awardInfo.awardStudentUuid">
          <view class="line" style="height: 5px"></view>
          <view style="padding: 20px;">
            <view class="award-item flex between" style="margin-bottom: 10px;">
              <text class="award-title">答题奖品</text>
              <image class="award-img" v-if="awardInfo.exchangeStatus == 0"
                src="https://qiniu-bjjrzy.bjjrzy.com/bjupi/practice/exchangeB.png" mode="widthFix">
              </image>
              <image class="award-img" v-else src="https://qiniu-bjjrzy.bjjrzy.com/bjupi/practice/exchangeA.png"
                mode="widthFix">
              </image>
            </view>
            <view class="award-item flex between">
              <text class="award-desc">开奖时间：{{ awardInfo.awardTime }}</text>
              <text class="award-desc">中奖联系：{{ awardInfo.awardLinkWay }}</text>
            </view>
          </view>
          <view class="line" style="height: 5px"></view>
          <view style="padding: 20px;">
            <view class="award-item flex between" style="margin-bottom: 15px;">
              <text class="award-desc">奖项</text>
              <text class="award-desc">奖品</text>
            </view>
            <view class="award-item flex between">
              <text class="award-title">{{ `奖项${chineseNums[awardInfo.awardNo - 1]}` }}</text>
              <text class="award-title">{{ awardInfo.awardName }}</text>
            </view>
          </view>
        </view>
    </view>

    <AddUserInfoPopup ref="AddUserInfoPopup" @success="addUserInfoSuccess"></AddUserInfoPopup>
    <CashPrize ref="cashPrize"></CashPrize>
  </view>
</template>
<script>
import { getPracticeSet, getPracticeCountHeader, listUpgPracticeDay, getUpgPracticeAwardData } from "@/improve/services";
import AddUserInfoPopup from "./components/AddUserInfoPopup.vue";
import CashPrize from "@/improve/publish/winAward/CashPrize.vue";
import { titleMap } from '@/improve/components/enum'
const chineseNums = ['一', '二', '三', '四', '五', '六', '七', '八', '九', '十'];
export default {
  name: "practiceView",
  components: { AddUserInfoPopup, CashPrize },
  data() {
    return {
      chineseNums,
      upgPracticeUuid: "",
      detail: {},
      loginData: {},
      type: "",
      headerInfo: {},
      practiceType: 1,
      list: [],
      awardInfo: {
        awardStudentUuid: '',
        exchangeStatus: 0, // 0 - 未兑换 1 - 已兑换
        awardWay: 1, // 1 - 线上兑奖,  2 - 线下兑奖
        awardTime: '',
        awardLinkWay: '',
        awardName: ''
      },
    }
  },
  computed: {
    sumData() {
      let sumNum = 0;
      let sumScore = 0;
      if (this.detail && this.detail.abilityExQuestion) {
        const list = JSON.parse(this.detail.abilityExQuestion);
        list.forEach(item => {
          sumNum += parseInt(item.cnt);
          sumScore += parseInt(item.cnt) * parseFloat(item.score);
        });
      }
      return { sumNum, sumScore };
    }
  },
  methods: {
    cashPrizeOpen() {
      this.$refs.cashPrize.open(this.awardInfo.awardStudentUuid, this.awardInfo.awardWay);
    },
    // 获取奖品信息
    getUpgPracticeAwardData() {
      getUpgPracticeAwardData({ uuid: this.upgPracticeUuid }).then(res => {
        this.awardInfo = {...res};
        console.log(this.awardInfo)
      })
    },
    // 获取头部信息
    getHeaderInfo() {
      getPracticeCountHeader({ upgPracticeUuid: this.upgPracticeUuid }).then(res => {
        this.headerInfo = res;
      })
    },
    // 获取详情数据
    getDetails() {
      getPracticeSet(this.upgPracticeUuid).then(res => {
        this.detail = res;
        this.$store.commit('updatePracticeSettings', res);
        wx.setNavigationBarTitle({
          title: titleMap[this.detail.practiceType]
        });
      })
    },
    // 获取历次练习-每日列表
    listUpgPracticeDay() {
      listUpgPracticeDay({ uuid: this.upgPracticeUuid }).then(res => {
        this.list = res;
      })
    },
    //进入练习
    startClick() {
      //填写用户信息
      this.$refs.AddUserInfoPopup.open(this.detail)
    },
    //填写用户信息成功
    addUserInfoSuccess(item, verification) {
      console.log(verification);
      this.$store.commit('updateExaminationInfo', verification);
      //开启人脸验证
      if (item.preTestRecognize) {
        //初始值
        this.$store.commit('updateProgressData', {
          progressPhoto: 1,
          checkNum: 0,
          uuid: item.uuid,  //练习id
        });
        uni.navigateTo({
          url: '/improve/facialPhoto/FacialPhotoPage',
        })
      } else {
        // 进入练习前 - 判断是否未交卷 且 再次练习
        if (this.detail.practiceType == 2) { // 在线练测
          uni.navigateTo({
            url: `/improve/join/exercises/index?practiceUuid=${verification.practiceUuid}&video=true`,
          })
        } else {
          uni.navigateTo({
            url: `/improve/join/examination/index?upgPracticeJoinUuid=${verification.upgPracticeJoinUuid}&id=${this.detail.id}&bhCheckId=${verification.bhCheckId}&bhCheckUuid=${verification.bhCheckUuid}&isPaper=true&testTime=${this.detail.time}&title=${this.detail.practiceName}`,
          })
        }
      }
    },
    //查询成绩
    selectScore(upgPracticeJoinUuid) {
      const id = upgPracticeJoinUuid ? upgPracticeJoinUuid : this.list[0].upgPracticeJoinUuid
      uni.navigateTo({
        url: `/improve/join/scoreResults/index?upgPracticeJoinUuid=${id}&practiceType=${this.detail.practiceType}`,
      })
    }
  },
  onLoad(options) {
    this.upgPracticeUuid = options.upgPracticeUuid
    this.practiceType = options.practiceType
    this.type = options?.type;
    console.log(this.type)
    this.getDetails()
    this.getHeaderInfo()
    if (this.type === 'history') {
      this.listUpgPracticeDay()
      console.log(this.practiceType)
      if (this.practiceType == '4') {
        this.getUpgPracticeAwardData()
      }
    }
  },
  onShow() {
    if (uni.getStorageSync('appKey')) {
      this.loginData = {
        ...uni.getStorageSync('loginData'),
      };
    }
  },
}
</script>

<style scoped lang="scss">
.award {
  // padding-bottom: calc(10px + env(safe-area-inset-bottom));
  border-radius: 4px 4px 0 0;
  background-color: #fff;

  .award-img {
    width: 52px;
  }

  .award-title {
    color: #333;
    font-size: 16px;
  }

  .award-desc {
    color: #999;
    font-size: 12px;
  }
}

.practiceView {
  height: 100vh;
  width: 100vw;
  // background-color: #F5F5F5;
  background-color: #FFFFFF;
  padding-bottom: calc(10px + env(safe-area-inset-bottom));
  box-sizing: border-box;

  .head {
    background-color: #FFFFFF;
    border-bottom-left-radius: 24rpx;
    border-bottom-right-radius: 24rpx;
    padding: 10px 20px;

    image {
      width: 100%;
      height: 116px;
      background-size: cover;
      border-radius: 4px;
    }

    .info {
      margin-top: 12px;

      .name {
        margin-right: 10px;
        color: #333333;
        font-size: 16px;
      }

      >view {
        font-size: 12px;
        color: #666666;

        image {
          width: 20px;
          height: 20px;
          margin-right: 6px;
        }
      }
    }
  }

  .line {
    width: 100%;
    background-color: #F5F5F5;
  }

  .btn-item {
    padding-top: 20px;
    padding-bottom: 10px;
    padding-bottom: calc(10px + env(safe-area-inset-bottom));
    box-sizing: border-box;
    // position: fixed;
    background-color: #FFFFFF;
    // box-shadow: 1px 1px 4px 2px rgba(0, 0, 0, 0.12);
    bottom: 0;
    width: 100%;
    z-index: 99;

    .btn {
      // background-color: #37B874;
      color: #37B874;
      box-shadow: 0 1px 8px 0 rgba(0, 0, 0, 0.08);
      border-radius: 24rpx;
      width: calc(100% - 40px);
      height: 90rpx;
      text-align: center;
      line-height: 90rpx;
      font-size: 32rpx;
      margin-left: 20px;
    }

    .btn1 {
      margin-left: 0;
      width: calc(50% - 20px);
    }

    .btn2 {
      background-color: #37B874;
      color: #fff;
    }

    .history {
      background-color: #FFFFFF;
      box-shadow: 1px 1px 4px 2px rgba(0, 0, 0, 0.12);
    }
  }

  .content {
    // padding-bottom: calc(90px + env(safe-area-inset-bottom));
    margin-top: 10px;
    background-color: #FFFFFF;
    border-top-left-radius: 24rpx;
    border-top-right-radius: 24rpx;

    &.no-btn {
      padding-bottom: calc(10px + env(safe-area-inset-bottom)) !important;
    }

    .user-info {
      padding: 16px 20px;

      image {
        width: 60px;
        height: 60px;
        border-radius: 50%;
        margin-right: 16px;
      }

      .user-account {
        color: #333333;
        font-size: 14px;

        .nickname {
          font-size: 16px;

          label {
            padding: 1px 5px;
            background-color: #EED682;
            color: #A86C12;
            font-size: 10px;
            margin-left: 9px;
            border-radius: 4px;
            height: fit-content;
          }
        }
      }
    }

    .practice-info {
      .item {
        height: 60px;
        padding: 0 20px;
        border-bottom: solid 1px #F2F2F2;

        .label {
          font-size: 32rpx;
          color: #333333;
        }

        text {
          margin-left: 16px;
          font-size: 16px;
          color: #999999;
          text-align: right;
        }
      }
    }


  }
}
</style>